import React from "react";


const errprStyle: React.CSSProperties = {
    padding: '10px',
    color: 'red',
    fontSize: '14px',
    lineHeight: '16px',
    whiteSpace: 'pre-wrap'
  };

export class ErrorBoundary extends React.Component{

    constructor(props) {
        super(props)
        this.state = {
            hasError: false,
            errorInfo: null
        }

    }

    static getDerivedStateFromError(error) {
        console.log(error)
        return {
            hasError: true,
            errorInfo: error
        }
    }

    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
        console.log(error, errorInfo)
    }

    render() {
        if (this.state.hasError) {
          // 你可以渲染任何自定义后备 UI
          return <p style={errprStyle}>
            {this.state.errorInfo.stack}
        </p>;
        }
    
        return this.props.children;
      }
}